<template>
	<view class="all">
		<view class="rank" v-for="(item,index) in data" :key="index" >
			<view class="textone" @click="handle(item)">
				<view class="img-info">
					<view class="img">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="img-text">
						<view class="text1">
							{{item.name}}
						</view>
						<view class="text2">

						</view>
						<view class="text2" style="margin-top: 10px;">
							{{item.gentle}}
						</view>
					</view>
				</view>
				<view>
				</view>
				<view>
					<button class="cu-btn round" :class="['bg-' + 'blue' ]" style="text-align: center;"
						v-if="!item.status">待预约</button>
					<button class="cu-btn round" :class="['bg-' + 'blue' ]" style="text-align: center;"
						v-if="item.status">已预约</button>
				</view>
			</view>
			<!-- 			<view class="info-title">
						我和韩园不得不说的故事sadasdasdasdsadasdasdasd
					</view> -->
			<view class="info-font">
				{{item.info}}
			</view>
			<view class="info-img">
				<view v-for="(items,indexe) in item.image" :key="indexe">
					<image :src="items" mode="" @click="ViewImage(item.image,indexe)"></image>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: ['data'],
		methods: {
			getData() {
				console.log(this.data, '21312321')
			},
			ViewImage(e, index) {
				uni.previewImage({
					urls: e,
					current: index
				});
			},
			handle(item) {
				const dataurl = 'recommned'
				console.log(';213', item._id)
				uni.navigateTo({ //成功后跳转到小程序首页，由于没得界面，我就屏蔽了。
					url: `/pages/cover/cards?id=${item._id}&&dataurl=${dataurl}`,
					success: function(res) {},
					fail: function(res) {
						console.log(';21123213', res)
					}
				});
			}
		},
		created() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	// .all {
	// 	width: 100vh;
	// 	height: 100vh;
	// }
	.textone {
		width: 350px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.rank {
		width: 340px;
		display: flex;
		flex-direction: column;
		margin: 10px 15px;
		align-items: flex-start;
		justify-content: center;
	}

	.img-info {
		display: flex;

		.img image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-size: cover;
			object-fit: cover;
			object-position: cover;
		}

		.img-text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-left: 5px;
		}
	}

	// .info-title {
	// 	font-size: 16px;
	// 	color: #000;
	// 	font-weight: 500;
	// 	margin: 3px 0;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	.info-font {
		color: gray;
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.info-img {
		// width: 350px;
		// height: 300px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		margin-top: 10px;

		image {
			// margin: 2.5px 2.5px;
			margin-right: 5px;
			margin-bottom: 5px;
			width: 160px;
			height: 170px;
			object-fit: cover;
			object-position: cover;
		}
	}
</style>
